/*
 * @Description: 借阅申请列表弹窗
 * @Author: Rfan
 * @Date: 2022-03-23 11:50:12
 * @LastEditTime: 2022-05-25 08:54:46
 */

import { Button, DatePicker, Form, Input, Modal, Space } from 'antd';
import classNames from 'classnames/bind';
import WithDialog from '@/components/WithDialog';

import styles from './styles/index.module.scss';

const cx = classNames.bind(styles);

const NotifyDialogComp = (props: any) => {
  const { onOk } = props;

  const handleOk = () => {
    onOk(123);
    props.onCancel();
  };

  const onCancel = () => {
    props.onCancel();
  };

  return (
    <Modal
      title="借阅申请列表"
      visible
      onOk={handleOk}
      {...props}
      width={600}
      footer={[
        <div className={cx('footer-wrap')}>
          <Space>
            <Button key="back" onClick={onCancel}>
              取消
            </Button>
            <Button key="back" onClick={onCancel}>
              确定通知
            </Button>
          </Space>
        </div>
      ]}
    >
      <p>点击【确定通知】，通知 XXX 前来领取档案</p>
      <div className="form-wrap">
        <Form>
          <Form.Item name="name" label="借阅人" rules={[{ required: true }]}>
            XXXX
          </Form.Item>
          <Form.Item name="name" label="领取日期" rules={[{ required: true }]}>
            <DatePicker showTime />
          </Form.Item>
          <Form.Item name="name" label="备注" extra="需要补充的信息，将附加在通知消息内容后">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

const NotifyDialog = (props: any) => new WithDialog(NotifyDialogComp, props);
export default NotifyDialog;
